import React from "react";

// 声明state类型
type Istate = {
    isChange: boolean
}

// 限制类
type Itoggle = {
    handleChange:(e:React.MouseEvent) => void
}

class Toggle extends React.Component<any,Istate> implements Itoggle {
    constructor(props:any){
        super(props);
        this.state = {
            isChange:false
        }
    }
    componentDidMount(): void {
        console.log('组件加载触发了');
    }

    handleChange = (e:React.MouseEvent) => {
        this.setState({
            isChange:!this.state.isChange
        })
    }
    render(): React.ReactNode {
        return(
            <fieldset>
                <legend>Toggle案例</legend>
                <h1>
                    {this.state.isChange?'欢迎登入':'请先充值Vip'}
                </h1>
                <button onClick={this.handleChange}>
                    {this.state.isChange?'点击退款':'点击充值'}
                </button>
            </fieldset>
        )
    }
}

export default Toggle